<template>
  <view class="order-detail-page">
    <!-- <view class="navbar">
      <view class="navbar-back" @click="navigateBack">
        <image src="/static/images/back-icon.png" mode="aspectFit"></image>
      </view>
      <view class="navbar-title">订单详情</view>
    </view> -->
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-text">加载中...</view>
    </view>
    
    <!-- 订单内容 -->
    <view v-else>
    <view class="order-status">
      <view class="status-icon">
        <image src="/static/images/order-success.png" mode="aspectFit"></image>
      </view>
      <view class="status-text">
        <text class="main-status">已完成</text>
        <text class="sub-status">订单已完成，感谢您的购买</text>
      </view>
    </view>
    <view class="order-info">
      <view class="info-item">
        <text class="item-label">订单编号：</text>
        <text class="item-value">{{ order.orderNumber }}</text>
      </view>
      <view class="info-item">
        <text class="item-label">下单时间：</text>
        <text class="item-value">{{ order.createTime }}</text>
      </view>
      <view class="info-item">
        <text class="item-label">支付方式：</text>
        <text class="item-value">{{ order.paymentMethod }}</text>
      </view>
      <view class="info-item">
        <text class="item-label">配送方式：</text>
        <text class="item-value">{{ order.deliveryMethod }}</text>
      </view>
    </view>
    <view class="delivery-address">
      <view class="address-header">
        <text>收货地址</text>
      </view>
      <view class="address-content">
        <view class="address-info">
          <text class="receiver">
            收件人：{{ order.receiverName?order.receiverName:"无名氏" }} 
            联系电话：  {{ order.receiverPhone?order.receiverPhone:"100010" }}
          </text>
          <text class="address">收货地址：{{ order.receiverAddress?order.receiverAddress:"夜袭寡妇村" }}</text>
        </view>
      </view>
    </view>
    <view class="order-goods">
      <view class="goods-header">
        <text>商品信息</text>
      </view>
      <view class="goods-list">
        <view class="goods-item" v-for="(item, index) in order.goodsList" :key="item.uniqueKey">
          <image class="goods-image" :src="item.imageUrl?item.imageUrl:'/static/images/default-goods.png'" mode="aspectFit"></image>
          <view class="goods-info">
            <text class="goods-name">{{ item.goods_name?item.goods_name:"未知商品" }}</text>
            <text class="goods-spec">{{ item.spec_name?item.spec_name:"未知规格" }}</text>
            <view class="goods-price">
              <text class="price">{{ item.price }}</text>
              <text class="quantity">{{ item.num }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="order-summary">
      <view class="summary-item">
        <text class="item-label">商品总价：</text>
        <text class="item-value">{{ formattedAmounts.goodsTotal }}</text>
      </view>
      <view class="summary-item">
        <text class="item-label">运费：</text>
        <text class="item-value">{{ formattedAmounts.shippingFee === '0.00' ? "免邮" : formattedAmounts.shippingFee }}</text>
      </view>
      <!-- <view class="summary-item">
        <text class="item-label">优惠券：</text>
        <text class="item-value">{{ formattedAmounts.couponAmount }}</text>
      </view> -->
      <view class="summary-item total">
        <text class="item-label">实付款：</text>
        <text class="item-value">{{ formattedAmounts.totalAmount }}</text>
      </view>
    </view>
    <view class="order-actions">
      <button class="action-btn" @click="viewLogistics">查看物流</button>
      <button class="action-btn" @click="goToReceipt" v-if="order.paymentMethod === '线下付款'">付款回执</button>
      <button class="action-btn primary" @click="leaveReview">评价商品</button>
    </view>
    </view> <!-- 结束 v-else -->
  </view>
</template>

<script>
import { getOrderDetail } from '@/api/order'

export default {
  data() {
    return {
      orderId: '',
      loading: true,
      order: {
        orderNumber: '',
        createTime: '',
        paymentMethod: '',
        deliveryMethod: '',
        status: '',
        receiverName: '',
        receiverPhone: '',
        receiverAddress: '',
        goodsList: [],
        goodsTotal: 0,
        shippingFee: 0,
        couponAmount: 0,
        totalAmount: 0
      }
    }
  },
  
  computed: {
    // 格式化的金额显示
    formattedAmounts() {
      console.log("=========00000order000000=========",this.order)
      return {
        goodsTotal: '¥' + this.order.goodsTotal.toFixed(2),
        shippingFee: '¥' + this.order.shippingFee.toFixed(2),
        couponAmount: '-¥' + this.order.couponAmount.toFixed(2),
        totalAmount: '¥' + this.order.totalAmount.toFixed(2)
      }
    }
  },
  onLoad(options) {
    this.orderId = options.orderId || options.id
    if (this.orderId) {
      this.loadOrderDetail()
    } else {
      uni.showToast({
        title: '订单ID不能为空',
        icon: 'none'
      })
    }
  },
  methods: {
    // 加载订单详情
    async loadOrderDetail() {
      try {
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        const response = await getOrderDetail(this.orderId)
        if (response && response.data) {
          const orderData = response.data
          
          // 数据映射
          this.order = {
            orderNumber: orderData.order.orderNumber || '',
            status: this.getOrderStatusText(orderData.payStatus, orderData.orderStatus),
            createTime: orderData.order.createTime || '',
            paymentMethod: this.getPaymentMethodText(orderData.order.paymentMethod),
            totalAmount: orderData.order.totalAmount || 0,
            goodsList: Array.isArray(orderData.goods_info) ? orderData.goods_info.map((item, index) => ({
              ...item,
              uniqueKey: item.id || `goods_${index}`,
              displayPrice: item.price || item.goods_price || 0
            })) : [],
            receiverName: orderData.order_info.receiver_name || '',
            receiverPhone: orderData.order_info.receiver_mobile || '',
            receiverAddress: orderData.order_info.receiver_address || '',
            goodsTotal: orderData.order.goodsTotal || 0,
            shippingFee: orderData.order.shippingFee || 0,
            couponAmount: orderData.couponAmount || 0
          }
          console.log("===0000000======order=0000000========",this.order)
          this.loading = false
        } else {
          throw new Error('订单数据格式错误')
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '获取订单详情失败',
          icon: 'none'
        })
        
        this.order = {
          orderNumber: 'N/A',
          status: '未知',
          createTime: 'N/A',
          paymentMethod: '未知',
          totalAmount: 0,
          goodsList: [],
          receiverName: 'N/A',
          receiverPhone: 'N/A',
          receiverAddress: 'N/A'
        }
      } finally {
        uni.hideLoading()
      }
    },

    // 处理商品列表数据
    processGoodsList(goodsList) {
      return goodsList.map(item => {
        return {
          ...item,
          // 统一字段名
          name: item.name || item.goods_name || '未知商品',
          spec: item.spec || item.goods_spec || '',
          imageUrl: item.imageUrl || item.image || '/static/images/default-goods.png',
          price: parseFloat(item.price || item.goods_price || 0),
          quantity: parseInt(item.quantity || item.goods_quantity || 1),
          // 格式化价格显示
          priceText: '¥' + parseFloat(item.price || item.goods_price || 0).toFixed(2),
          quantityText: 'x' + parseInt(item.quantity || item.goods_quantity || 1)
        }
      })
    },

    // 获取支付方式文本
    getPaymentMethodText(paymentMethod) {
      const paymentMethods = {
        '1': '微信支付',
        '2': '支付宝',
        '3': '银行卡支付',
        '4': '余额支付',
        '5': '货到付款',
        'wechat': '微信支付',
        'alipay': '支付宝',
        'balance': '余额支付',
        'cash': '货到付款'
      }
      return paymentMethods[paymentMethod] || '未知支付方式'
    },

    // 获取订单状态文本
    getOrderStatusText(status, payStatus) {
      // 先检查支付状态
      if (payStatus === '0' || payStatus === 'unpaid') {
        return '待付款'
      } else if (payStatus === '1' || payStatus === 'paid') {
        // 已付款，根据订单状态判断
        const statusMap = {
          'pending': '待发货',
          'shipped': '已发货',
          'delivered': '已送达', 
          'completed': '已完成',
          'cancelled': '已取消',
          'refunded': '已退款'
        }
        return statusMap[status] || '已付款'
      }
      
      // 其他状态
      const statusMap = {
        'pending': '待处理',
        'shipped': '已发货',
        'delivered': '已送达',
        'completed': '已完成',
        'cancelled': '已取消',
        'refunded': '已退款'
      }
      return statusMap[status] || status || '未知状态'
    },

    navigateBack() {
      uni.navigateBack();
    },
    viewLogistics() {
      uni.showToast({
        title: '查看物流',
        icon: 'none'
      });
    },
    goToReceipt() {
      uni.navigateTo({
        url: `/pages/order/receipt?orderNo=${this.order.orderNumber}`
      });
    },
    leaveReview() {
      uni.navigateTo({
        url: '/pages/review/add?orderId=' + this.order.orderNumber
      });
    }
  }
}
</script>

<style>
.order-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: calc(168rpx + env(safe-area-inset-bottom));
}

.loading-container {
  padding: 100rpx;
  text-align: center;
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

/* 统一卡片样式 */
.order-status, 
.order-info,
.delivery-address,
.order-goods,
.order-summary {
  background: #fff;
  margin: 32rpx 30rpx;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 40rpx rgba(0,0,0,0.06);
}

/* 订单状态优化 */
.order-status {
  margin: 32rpx 30rpx 24rpx;
  padding: 40rpx 32rpx;
}

.status-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.status-icon image {
  width: 100%;
  height: 100%;
}

.status-text {
  flex: 1;
}

.main-status {
  font-size: 36rpx;
  color: #00b894;
}

.sub-status {
  font-size: 28rpx;
  color: #7f8c8d;
}

/* 信息项优化 */
.order-info {
  margin: 0 30rpx 24rpx;
  padding: 8rpx 0;
}

.info-item {
  padding: 24rpx 0;
}

.item-label {
  font-size: 30rpx;
  color: #636e72;
}

.item-value {
  font-size: 30rpx;
  color: #2d3436;
  font-weight: 500;
}

/* 收货地址优化 */
.delivery-address {
  margin: 0 30rpx 24rpx;
}

.address-header {
  padding: 28rpx 40rpx;
  border-bottom: 2rpx solid #f1f2f6;
}

.address-header text {
  font-size: 34rpx;
  font-weight: 600;
  color: #2d3436;
  position: relative;
  padding-left: 16rpx;
}

.address-header text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 28rpx;
  background: #ff6b6b;
  border-radius: 4rpx;
}

.address-content {
  padding: 32rpx 40rpx;
}

.address-info {
  display: grid;
  gap: 16rpx;
}

.receiver {
  font-size: 32rpx;
  display: flex;
  gap: 40rpx;
  align-items: center;
}

.address {
  font-size: 28rpx;
  line-height: 1.6;
  color: #636e72;
  position: relative;
  padding-left: 40rpx;
}

.address::before {
  content: '📍';
  display: inline-block;
  vertical-align: middle;
  margin-right: 12rpx;
  font-size: 32rpx;
  /* 确保完全移除以下属性 */
  /* background: url('@/assets/icons/location-pin.png') no-repeat center/contain; */
  /* width: 32rpx; */
  /* height: 32rpx; */
}

.order-goods {
  margin: 0 30rpx 24rpx;
}

.goods-header {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.goods-header text {
  font-size: 34rpx;
  font-weight: 600;
  color: #2d3436;
  position: relative;
  padding-left: 16rpx;
}

.goods-header text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 28rpx;
  background: #ff6b6b;
  border-radius: 4rpx;
}

.goods-list {
  padding: 20rpx 0;
}

.goods-item {
  padding: 32rpx;
  gap: 24rpx;
  display: flex;
  border-bottom: 1rpx solid #eee;
}

.goods-item:last-child {
  border-bottom: none;
}

.goods-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-name {
  font-size: 32rpx;
  line-height: 1.4;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.goods-spec {
  background: #f8f9fa;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #636e72;
  align-self: flex-start;
}

.goods-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-family: DIN Alternate;
  font-size: 34rpx;
  color: #e74c3c;
}

.quantity {
  font-size: 28rpx;
  color: #666;
}

.order-summary {
  margin: 0 30rpx 40rpx;
}

.summary-item {
  padding: 24rpx 0;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item.total {
  padding: 32rpx 0 24rpx;
  margin-top: 16rpx;
}

.summary-item.total .item-value {
  font-size: 36rpx;
}

.order-actions {
  padding: 24rpx 30rpx;
  background: #fff;
  box-shadow: 0 -8rpx 40rpx rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1rpx solid #eee;
  margin-top: 0;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.action-btn {
  width: 280rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin: 0 20rpx;
  border: 2rpx solid #b2bec3;
  transition: all 0.2s;
}

.action-btn.primary {
  border-color: #ff4500;
  background: linear-gradient(135deg, #ff6b6b, #ff4500);
}

.action-btn:active {
  transform: scale(0.98);
}

/* 字体层次系统 */
/* 一级标题 */
.module-header {
  font-size: 36rpx;
  font-weight: 600;
  color: #2d3436;
}

/* 二级标题 */
.sub-header {
  font-size: 32rpx;
  font-weight: 500;
}

/* 正文 */
.content-text {
  font-size: 30rpx;
  line-height: 1.6;
}

/* 辅助文本 */
.helper-text {
  font-size: 28rpx;
  color: #636e72;
}
</style>    